<template>
	<uv-popup ref="popupBox" mode="bottom" :round="10" @maskClick="closeFunc">
		<view class="title">“{{ projectNodesItem.node_name }}”节点验收</view>
		<scroll-view class="scroll-view" scroll-y>
			<view class="uv-form-box">
				<uv-form labelPosition="top" :model="jdysRuleForm" :rules="jdysRules" ref="form" labelWidth="auto">
					<block v-for="(item, index) in jdysFormList" :key="index">
						<template v-if="item.content_type == 2">
							<uv-form-item :label="item.name" :prop="item.prop" labelPosition="left" :required="item.is_required == 1">
								<view class="file-box">
									<uv-button
										type="primary"
										text="点击上传"
										@click="uploadFunc(item.prop)"
										customTextStyle="font-weight: 400;font-size: 24rpx;color: #FFFFFF;"
										customStyle="width: 170rpx;height: 60rpx;background: #3B75FF;border-radius: 16rpx;"
									></uv-button>
								</view>
							</uv-form-item>
							<view class="file-list">
								<view class="file-media" v-for="(file, fileIndex) in jdysRuleForm[item.prop]" :key="fileIndex">
									<view class="del-icon" @click.stop="delFile(fileIndex, item.prop)">
										<uv-icon name="trash-fill" size="18" color="#ffffff"></uv-icon>
									</view>
									<view class="icon-box" v-if="file.fileType == 'video'">
										<uv-icon name="play-right-fill" size="20" color="#ffffff"></uv-icon>
									</view>
									<image mode="aspectFill" :src="file.fileType == 'image' ? file.tempFilePath : file.thumbTempFilePath" class="media-item"></image>
								</view>
							</view>
						</template>
						<template v-if="item.content_type == 1">
							<uv-form-item :label="item.name" :prop="item.prop" :required="item.is_required == 1">
								<uv-textarea height="100" v-model="jdysRuleForm[item.prop]" placeholder="请输入内容"></uv-textarea>
							</uv-form-item>
						</template>
					</block>
					<uv-form-item label="备注" prop="remark">
						<uv-textarea height="100" v-model="jdysRuleForm.remark" placeholder="请输入内容"></uv-textarea>
					</uv-form-item>
				</uv-form>
			</view>
		</scroll-view>
		<view class="btn-box">
			<uv-button
				@click="closeFunc"
				text="取 消"
				customTextStyle="font-weight: 400;font-size: 28rpx;color: #8F8F8F;"
				customStyle="width: 180rpx;height: 80rpx;background: #FFFFFF;border-radius: 16rpx;border: 2rpx solid #E3E3E3;margin-bottom:20rpx;"
			></uv-button>
			<uv-button
				@click="formSubmit"
				type="primary"
				text="提 交"
				customTextStyle="font-weight: 400;font-size: 28rpx;color: #FFFFFF;"
				customStyle="width: 500rpx;height: 80rpx;background: #3B75FF;border-radius: 16rpx;margin-bottom:20rpx;"
			></uv-button>
		</view>
	</uv-popup>
</template>

<script setup>
import { computed, watch, onMounted, getCurrentInstance, ref, defineEmits } from 'vue';
const { proxy: that } = getCurrentInstance();
let props = defineProps({
	show: {
		type: Boolean,
		default: () => {
			return false;
		}
	},
	dataObj: {
		type: Object,
		default: () => {
			return {};
		}
	},
	jdysFormList: {
		default: () => {
			return [];
		}
	},
	jdysRuleForm: {
		default: () => {
			return {};
		}
	},
	jdysRules: {
		default: () => {
			return {};
		}
	},
	projectNodesItem: {
		default: () => {
			return {};
		}
	}
});

onMounted(() => {
	// that.$refs.popupBox.open();
	// getCompanyList();
});

watch(
	() => props.show,
	(newValue, oldValue) => {
		console.log(newValue, oldValue, '值变化');
		if (props.show) {
			console.log(props.jdysFormList);
			console.log(props.jdysRuleForm);
			console.log(props.jdysRules);
			that.$refs.popupBox.open();
		} else {
			that.$refs.form.clearValidate();
			that.$refs.popupBox.close();
		}
	}
);
const emit = defineEmits(['close', 'onSuccess']);

const closeFunc = () => {
	emit('close', false);
};
// 上传文件
const uploadFunc = (name) => {
	uni.chooseMedia({
		mediaType: ['image', 'video'], //, 'video'
		sourceType: ['album', 'camera'],
		count: 9,
		success(res) {
			console.log(res, '文件');
			res.tempFiles.map((item) => {
				props.jdysRuleForm[name].push(item);
				that.$refs.form.validateField(name);
			});
		}
	});
};
// 删除文件
const delFile = (index, name) => {
	console.log(props.jdysRuleForm[name], 'props.jdysRuleForm[name]', props.jdysRuleForm, name);
	props.jdysRuleForm[name].splice(index, 1);
	that.$refs.form.validateField(name);
};

// 表单提交
const formSubmit = () => {
	let data = props.jdysRuleForm;
	let dataObj = props.dataObj;
	console.log(data, '表单数据', dataObj);
	that.$refs.form
		.validate()
		.then((res) => {
			uni.showLoading({
				mask: true,
				title: '文件上传中...'
			});
			let promiseAll = []; //
			let obj = {
				project_id: props.dataObj.id,
				node_id: props.projectNodesItem.id
			};
			props.projectNodesItem.children.forEach((item) => {
				let key = `name_${item.id}`;
				obj[key] = item.node_name;
			});
			//提交数据
			for (let i in data) {
				console.log(data[i], i);
				if (Array.isArray(data[i])) {
					if (data[i].length) {
						promiseAll.push(uploadAjax(data[i], i));
					} else {
						obj[i] = [];
					}
				} else {
					obj[i] = data[i];
				}
			}
			Promise.all(promiseAll).then((result) => {
				uni.hideLoading();
				result.forEach((item) => {
					obj[item.type] = item.res.arrResult;
				});
				console.log(obj, '提交数据');
				uni.showLoading({
					mask: true,
					title: '信息提交中...'
				});
				that.$Api
					.wxNodeAcceptance(obj)
					.then((res) => {
						uni.hideLoading();
						if (res.code == 200) {
							emit('onSuccess', true);
						}
						uni.showToast({
							title: res.code == 200 ? '操作成功' : res.message,
							icon: res.code == 200 ? 'success' : 'error'
						});
					})
					.catch((err) => {
						uni.hideLoading();
					});
			});
		})
		.catch((errors) => {});
};
const uploadAjax = (fileList, type) => {
	return new Promise((resolve, reject) => {
		that.$upload(fileList).then((res) => {
			console.log(res, '文件上传');
			resolve({
				type,
				res
			});
		});
	});
};
// 是否图片
function isImageUrl(filename) {
	var imgExtensions = /\.(jpeg|jpg|gif|png|bmp)$/i;
	return imgExtensions.test(filename);
}
// const statusText = computed(() => {

// });
</script>

<style lang="scss" scoped>
.title {
	font-size: 32rpx;
	width: 100%;
	line-height: 100rpx;
	text-align: center;
}
.btn-box {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	box-sizing: border-box;
	margin-top: 30rpx;
}
.scroll-view {
	width: 100%;
	max-height: 50vh;
	background-color: #fff;
	// padding: 0 30rpx;
	// box-sizing: border-box;
	.uv-form-box {
		padding: 0 30rpx !important;
	}
	.file-box {
		width: 100%;
		display: flex;
		flex-direction: row-reverse;
	}
	.file-list {
		width: 100%;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		.file-item {
			display: flex;
			justify-content: space-between;
			margin-top: 10rpx;
			margin-left: 10rpx;
			padding: 10rpx;
			background-color: #f8f8f8;
			width: 90%;

			.file-name {
				font-size: 24rpx;
				overflow: hidden; /* 确保溢出文本会被隐藏 */
				white-space: nowrap; /* 确保文本在一行内显示 */
				text-overflow: ellipsis; /* 使用省略号显示文本溢出的部分 */
				width: 80%;
			}
		}
		.file-media {
			width: 150rpx;
			height: 150rpx;
			margin: 0 27rpx 22rpx 0;
			overflow: hidden;
			border-radius: 10rpx;
			position: relative;
			&:nth-child(4n) {
				margin-right: 0;
			}
			.media-item {
				width: 100%;
				height: 100%;
			}
			.icon-box {
				position: absolute;
				z-index: 1;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				background-color: rgba(0, 0, 0, 0.6);
				width: 70rpx;
				height: 70rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
			}
			.del-icon {
				width: 60rpx;
				height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				right: 10rpx;
				top: 10rpx;
				z-index: 1;
				background-color: rgba(0, 0, 0, 0.6);
				border-radius: 10rpx;
			}
		}
	}
}
</style>
